import { defineComponent } from "vue";

export default defineComponent({
	name: "ProcessBar",
	props: { rate: Number },
	setup(props) {
		console.log(props.rate);
		const array = computed(() => {
			return new Array(Math.floor((props.rate || 0) / 10)).fill(1);
		});
		console.log(array.value.join(","));
		return () => (
			<div>
				<div className="w-full h-full relative flex justify-center items-center">
					<div
						className={"absolute w-[6px] h-full border-[#1A2E57] border-l-2 border-y-[1px] border-r-0 border-solid left-0"}
					></div>
					<div
						className={"absolute w-[6px] h-full border-[#1A2E57] border-r-2 border-y-[1px] border-l-0 border-solid right-0"}
					></div>
					<div className={"absolute bg-[#0D54F919] h-[1px] w-full top-0"}></div>
					<div className={"absolute bg-[#0D54F919] h-[1px] w-full bottom-0"}></div>
					<div className={"bg-[#0D54F919] w-full h-[60%] flex flex-row px-[2px]"}>
						{array.value.map(() => {
							return <div className={"w-[10px] h-full mx-[2px] bg-[#FFA011]"}></div>;
						})}
					</div>
				</div>
			</div>
		);
	}
});
